<template>
  <a-button class="audit-reject" @click="openModal()">
    <template #icon><img :src="reject_icon" /></template>
    交接驳回
  </a-button>
  <a-modal
    :body-style="modalBodyStyle"
    v-model:open="visible"
    destroyOnClose
    :footer="null"
    :centered="true"
  >
    <template #title>
      <img style="padding-right: 16px" :src="warning_icon" />
      <span class="modal-title">请确认交接驳回</span>
    </template>
    <a-form
      :model="modalForm"
      name="basic"
      :rules="modalRules"
      :labelCol="{ span: 6, offset: 2 }"
      :wrapper-col="{ span: 16 }"
      autocomplete="off"
      @finish="auditReject"
    >
      <div class="modal-edit">
        <div class="edit-content">
          <a-form-item name="bhyy" label="驳回原因">
            <a-input
              v-model:value="modalForm.bhyy"
              :autosize="{ minRows: 1, maxRows: 1 }"
              placeholder="请输入驳回原因"
            />
          </a-form-item>
        </div>
        <a-divider></a-divider>
        <div class="footer-content">
          <a-button @click="closeModal">取消</a-button>
          <a-form-item>
            <a-button class="reject" html-type="submit">驳回</a-button>
          </a-form-item>
        </div>
      </div>
    </a-form>
  </a-modal>
</template>
  <script lang="ts" setup>
  import reject_icon from '/src/assets/icon/reject-icon.svg'
  import { Rule } from 'ant-design-vue/es/form/interface'
  import warning_icon from '/src/assets/icon/warning-icon.svg'
  import { ref } from 'vue'
  
  const visible = ref(false)
  const emit = defineEmits(['auditReject'])
  const modalForm = ref<any>({ bhyy: '' })
  const modalBodyStyle = {
    background: '#FFFFFF',
    width: '424px',
    height: '179px',
    padding: '0',
    'border-radius': '8px',
  }
  const modalRules: Record<string, Rule[]> = {
    bhyy: [{ required: true, message: '请输入驳回原因' }],
  }
  const auditReject = (): void => {
    emit('auditReject', modalForm.value)
  }
  const closeModal = (): void => {
    visible.value = false
  }
  
  const openModal = (): void => {
    visible.value = true
  }
  </script>
  <style lang="less" scoped>
  .audit-reject {
    width: 110;
    height: 32px;
    background: #f60764;
    border-radius: 8px;
    border: 1px solid #ffffff;
    color: #ffffff;
    img {
      margin-right: 5px;
      height: 1rem;
      width: 1rem;
    }
  }
  .modal-edit {
    height: 100%;
    padding-top: 25px;
    width: 100%;
    .modal-title {
      width: 128px;
      height: 24px;
      font-size: 16px;
      font-family: SourceHanSansCN-Medium, SourceHanSansCN;
      font-weight: 500;
      color: #1d2c51;
      line-height: 24px;
    }
    .edit-content {
      .ant-input {
        background: #ffffff;
        border-radius: 6px;
        border: 1px solid #c2c7d0;
      }
    }
  
    .footer-content {
      display: flex;
      justify-content: space-evenly;
      width: 176px;
      float: right;
      .reject {
        width: 78;
        height: 32px;
        background: #f60764;
        border-radius: 8px;
        border: 1px solid #ffffff;
        color: #ffffff;
      }
    }
  }
  </style>
  